<template>
  <div class="container" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box">
        <!-- 查询条件 -->
        <div class="query-box">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <div class="schoolBoxCont">
          <div class="schoolBoxContItem">
            <el-form-item label prop="phone">
              <div class="schoolBoxContItemTitle">
                埋点ID
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.bid"
                  placeholder="埋点ID"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
        
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                url
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.url"
                  placeholder="url"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                埋点名称
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.bName"
                  placeholder="埋点名称"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                平台属性
              </div>
              <div class="schoolBoxContItemInput">
                <el-select
                  v-model="queryBox.platform"
                  clearable
                  filterable>
                  <el-option
                    v-for="item in platform_options"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                时间
              </div>
              <div class="schoolBoxContItemInput schoolBoxContItemInput2">
                <el-date-picker
                  v-model="value2"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd 00:00:00"
                  format="yyyy-MM-dd 00:00:00"
                  align="right">
                </el-date-picker>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button
          :label="$t('action.search')"
          perms="true"
          type="primary"
          @click="search"
        />
      </div>
    </div>
    <div class="add-btns fl">
      <kt-button
        :label="$t('导出')"
        perms="DataCollection:ClickStatistics:export"
        type="primary"
        @click="exportData"
      />
    </div>
    <!--表格内容栏-->
    <div class="btn">
      <Crm-table
        :showOperation='false'
        class="pageStatistics"
        permsSee="customer:chinaedu:see"
        permsEdit="customer:chinaedu:edit"
        :data="pageResult"
        @sortChange="sortChange"   
        :columns="columns"
        :loading='loading'
        @findPage="findPage"
      ></Crm-table>
    </div>

  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { regionDataPlus } from "element-china-area-data";
import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: "PageStatistics",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      size: "small",
      student_data_from_options: [
        {
          label: " ",
          key: " "
        }
      ],
      loading:false,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "platform", label: "平台属性", minWidth: 120 },
        { prop: "belongPage", label: "url", minWidth: 220 },
        { prop: "buryName", label: "埋点名称", minWidth: 120 },
        { prop: "description", label: "描述", minWidth: 120 },
        { prop: "clickNum", sortable: 'custom', label: "点击次数", minWidth: 120 },
        { prop: "bid", label: "埋点ID", minWidth: 120 },
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime());
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime()- 3600 * 1000 * 24 );
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value2: '',
      queryBox: {
        startDate:'',
        endDate:'',
        url:'',
        bid:'',
        buryName:'',
        bName:'',
        id:''

      },
      input2:'',
      platform_options:[]
    };
  },
  methods: {
     // 排序
    sortChange(column) {
      if(column.index.order=='ascending'){
        this.queryBox.orderField='click_num'
        this.queryBox.orderType='asc'
      }
      if(column.index.order=='descending'){
        this.queryBox.orderField='click_num'
        this.queryBox.orderType='desc'
      }
      this.findPage(null)
    },
    // 搜索
    search() {
      this.loading = true;
      this.queryBox.pageNum=1
      // this.queryBox.startDate = this.value2[0];
      // this.queryBox.endDate = this.value2[1];
      if(this.value2){
        this.queryBox.startDate = this.value2[0];
        this.queryBox.endDate = this.value2[1];
      }else{
        this.queryBox.startDate = '';
        this.queryBox.endDate = '';
      }
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    handleChange(value) {
      console.log(value);
    },
    // 获取分页数据
    findPage: function(data) {
      this.loading = true;
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.$api.user.btnStatisticsList(
          this.queryBox
      ).then(res=>{
          let content = { content: res.data, totalSize: res.total };
          this.pageResult = content;
          this.loading = false;
      })
      
    },

    reset(queryBox) {
      this.$refs.queryBox.resetFields();
      this.queryBox.startDate = "";
      this.queryBox.endDate = " ";
      this.queryBox.url=''
      this.queryBox.bid=''
      this.queryBox.bName=''
      this.queryBox.buryName=''
      this.queryBox.platform=''
      this.value2 = "";
      this.queryBox.orderField=''
      this.queryBox.orderType=''
      this.findPage(null);
    },
    getPlatForm(){
       // 获取平台属性
      

      this.platform_options = JSON.parse(
        localStorage.getItem("buryinglatform")
      );
    },
    exportData(){
      this.queryBox.pageNum=1
      axios({
        method: "get",
        url: baseUrl + "/behaviorLog/exportBhClickStatistics",
        params: this.queryBox
      }).then(res => {
        window.open(res.request.responseURL);
      });
    },
  },

  mounted() {
    this.getPlatForm()
  }
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>
<style lang='scss' scoped>
.checked-person {
  font-weight: 500;
  display: inline-block;
  text-align: center;
  margin: 3% 0 3% 0;
}
.batchdistribution-pop-tit {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}
.demo-form-inline {
  width: 90%;
  margin: 0 auto;
  .el-dialog__body .el-input {
    width: 93% !important;
  }
  .el-select {
    width: 100% !important;
  }
  .tit {
    display: inline-block;
    margin-top: 10%;
  }
}
.el-row .el-col {
  margin-left: 0;
}
.query-box .el-row .el-col {
  margin-left: 2%;
}
.el-dialog__wrapper .el-form-item__content {
  margin-left: 0;
}
</style>
<style lang='scss'>
.batchdistribution-pop .el-dialog__header {
  padding: 0 0 0 0 !important;
}
.pageStatistics{
  tbody{
    tr{
      td{
        height: 35px;
      }
    }
  }
}
</style>
<style lang="scss">
.schoolBoxCont {
  margin: 5px 5px;

  .schoolBoxContItem {
    margin-right: 10px;
    float: left;
    .el-form-item__content {
      display: flex;
      flex-direction: row;
    }
    .schoolBoxContItemTitle {
      background: #f5f7fa;
      width: 115px;
      border: 1px solid #dcdfe6;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      line-height: 39px;
      border-right: none;
    }
    .schoolBoxContItemInput {
      width: 150px;
      line-height: 39px;
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
    }
    .schoolBoxContItemInput2 {
      width: 350px;
      line-height: 39px;
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
    }
  }
}
</style>
